<div class="main-content flex-fill grid-bg">
    <div class="big-header-banner">
        <div id="header" class="page-header sticky">
            <div class="navbar navbar-expand-md">
                <div class="container-fluid p-0">

                    <div class="collapse navbar-collapse order-2 order-md-1">
                        <!-- 菜单折叠 -->
                        <div class="header-mini-btn">
                            <label>
                                <input id="mini-button" type="checkbox">
                                <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                                    <path class="line--1" d="M0 40h62c18 0 18-20-17 5L31 55"></path>
                                    <path class="line--2" d="M0 50h80"></path>
                                    <path class="line--3" d="M0 60h62c18 0 18 20-17-5L31 45"></path>
                                </svg>
                            </label>
                        </div>
                        <!-- 菜单折叠 end -->

                        <ul class="navbar-nav site-menu" style="margin-right: 16px;">
                            {{ range .Site.Data.headers }}
                            <li {{ if .list }}class="menu-item-has-children" {{ end }}>
                                <a href="{{ .link }}" target="_blank" class="external-link" rel="noopener noreferrer">
                                    <i class="{{ .icon }} fa-lg mr-2"></i>
                                    <span>{{ .item }}</span>
                                </a>
                                <!-- 导航栏下拉菜单实现添加图标 -->
                                <ul class="sub-menu">
                                    {{ range .list }}
                                    <li {{ if .list }}class="menu-item-has-children" {{ end }}>
                                        <a href="{{ .link }}"  target="_blank" class="external-link" rel="noopener noreferrer">
                                            <i class="{{ .icon }} fa-lg mr-2"></i>
                                            <span>{{ .name }}</span>
                                        </a>
                                    </li>
                                    {{ end }}
                                </ul>
                            </li>
                            {{ end }}
                        </ul>

                        {{ if not (eq $.Site.Params.qweather.key "") }}

                        {{ end }}
                    </div>

                    <ul class="nav navbar-menu text-xs mt-3 order-1 order-md-2 d-flex flex-row align-items-center justify-content-center" role="list">
                        <!-- 一言 -->
                        {{ with .Site.Params.yiyan }}
                        <li class="nav-item mr-3 mr-lg-0 d-none d-lg-block">
                            <div id="hitokoto"><a href="#" target="_blank" id="hitokoto_text" aria-label="一言"></a></div>
                        </li>
                        {{ end }}
                        <!-- 一言 end -->

                        <!-- 和风天气 -->
                        {{ with .Site.Params.weather }}
                        <li class="nav-item ml-1 ml-md-2 mr-1">
                            <i id="qweather" style="display: none; font-size: 20px;"></i>
                        </li>
                        {{ end }}
                        <!-- 和风天气 end -->

                        <!-- 用户中心 -->
                        <li class="nav-item ml-1 ml-md-2 d-flex align-items-center justify-content-center">
                            <a id="user-setting" href="javascript:" data-toggle="modal" data-target="#settings-modal">
                                <i class="user-setting-icon iconfont icon-user" title="用户设置"></i>
                            </a>
                        </li>
                        <!-- 用户中心 end -->
                    </ul>
                </div>
            </div>
        </div>
        <div class="placeholder" style="height:74px"></div>
    </div>
<script>
    // 链接跳转时会打开新窗口
    $('.external-link').on('click', function (e) {
        const url = this.getAttribute('href') || 'https://example.com';
        e.preventDefault();
        const newWindow = window.open('', '_blank');
        newWindow.location.href = url;
    })
</script>